<!DOCTYPE html>
<html lang="en" class="hb-loaded"><head>
    <meta charset="UTF-8">
    <title>uni-app官网</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="uni-app：一个使用 Vue.js 开发跨平台应用的前端框架">
    <meta name="keywords" content="uni-app,uniapp,小程序,微信小程序,小程序解决方案,微信小程序解决方案,快应用,DCloud,混合app,app开发,hbuilder,hybrid,native,webview">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/icon.png?v=1556263038786">
    <link rel="stylesheet" href="/static/vue.css">
    <link rel="stylesheet" href="/static/index.min.css?v=1559299190792">
</head>

<body data-page="/component/README.md" class="ready sticky" huaban_collector_injected="true">
<nav class="app-nav pc no-badge"><div class="logo"><a href="//www.dcloud.io/" target="__blank" class="dcloud-logo"></a>
        <a href="/" class="uniapp-logo"></a></div><div class="search nav-search"><div class="input-wrap">
            <input type="search" value="" placeholder="搜索">
            <div class="clear-button">
                <svg width="26" height="24">
                    <circle cx="12" cy="12" r="11" fill="#ccc"></circle>
                    <path stroke="white" stroke-width="2" d="M8.25,8.25,15.75,15.75"></path>
                    <path stroke="white" stroke-width="2" d="M8.25,15.75,15.75,8.25"></path>
                </svg>
            </div>
        </div>
        <div class="results-panel"></div>
    </div><ul>
        <li><a href="/README">介绍</a></li>
        <li><a href="/collocation/pages">框架</a></li>
        <li><a href="/component/README" class="active">组件</a></li>
        <li><a href="/api/README">API</a></li>
        <li>其它规范<ul>
                <li><a href="http://www.html5plus.org/doc/h5p.html" target="_blank">App扩展规范HTML5 Plus</a></li>
                <li><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank">微信小程序</a></li>
                <li><a href="https://docs.alipay.com/mini/developer/getting-started" target="_blank">支付宝小程序</a></li>
                <li><a href="https://smartprogram.baidu.com/docs/develop/tutorial/codedir/" target="_blank">百度小程序</a></li>
                <li><a href="https://developer.toutiao.com/docs/framework/" target="_blank">头条小程序</a></li>
                <li><a href="https://q.qq.com/wiki/develop/miniprogram/frame/" target="_blank">QQ小程序</a></li>
                <li><a href="https://weex.apache.org/cn/guide/" target="_blank">Weex</a></li>
            </ul>
        </li>
    </ul>
    <ul class="nav-href">
        <li class="ext-link"><a href="//ext.dcloud.net.cn/" target="__blank">插件市场</a></li>
        <li><a href="//dev.dcloud.net.cn/wish/?channel=uniapp" target="__blank">需求墙</a></li>
        <li><a href="//dev.dcloud.net.cn/sponsor/?channel=uniapp" target="__blank" style="color:#FF6600!important;"><img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/heart.png" class="heart">赞助我们</a></li>
    </ul>

    <div class="github">
        <a href="//github.com/dcloudio/uni-app" target="_blank">
            <img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/github.svg">
        </a>
    </div></nav><main><button class="sidebar-toggle hide"><div class="sidebar-toggle-button"><span></span><span></span><span></span></div></button><aside class="sidebar pc"><h1 class="hide"><a class="app-name-link" data-nosearch="" href="/">uni-app</a></h1><div class="sidebar-nav"><ul class="sidebar-nav-ul">
                <li class="sidebar-nav-li" data-level="1.2.0"><span class="chapter">视图容器</span><ul>
                        <li><a href="/component/view">view</a></li>
                        <li><a href="/component/scroll-view">scroll-view</a></li>
                        <li><a href="/component/swiper">swiper</a></li>
                        <li><a href="/component/movable-view?id=movable-area">movable-area</a></li>
                        <li><a href="/component/movable-view?id=movable-view">movable-view</a></li>
                        <li><a href="/component/cover-view?id=cover-view">cover-view</a></li>
                        <li><a href="/component/cover-view?id=cover-image">cover-image</a></li>
                    </ul>
                </li>
                <li class="sidebar-nav-li" data-level="1.2.1"><span class="chapter">基础内容</span><ul>
                        <li><a href="/component/icon">icon</a></li>
                        <li><a href="/component/text">text</a></li>
                        <li><a href="/component/rich-text">rich-text</a></li>
                        <li><a href="/component/progress">progress</a></li>
                    </ul>
                </li>
                <li class="sidebar-nav-li" data-level="1.2.2"><span class="chapter">表单组件</span><ul>
                        <li><a href="/component/button">button</a></li>
                        <li><a href="/component/checkbox">checkbox</a></li>
                        <li><a href="/component/editor">editor</a></li>
                        <li><a href="/component/form">form</a></li>
                        <li><a href="/component/input">input</a></li>
                        <li><a href="/component/label">label</a></li>
                        <li><a href="/component/picker">picker</a></li>
                        <li><a href="/component/picker-view">picker-view</a></li>
                        <li><a href="/component/radio">radio</a></li>
                        <li><a href="/component/slider">slider</a></li>
                        <li><a href="/component/switch">switch</a></li>
                        <li><a href="/component/textarea">textarea</a></li>
                    </ul>
                </li>
                <li class="sidebar-nav-li" data-level="1.2.3"><span class="chapter">导航</span><ul>
                        <li><a href="/component/navigator">navigator</a></li>
                    </ul>
                </li>
                <li class="sidebar-nav-li" data-level="1.2.4"><span class="chapter">媒体组件</span><ul>
                        <li><a href="/component/audio">audio</a></li>
                        <li><a href="/component/camera">camera</a></li>
                        <li><a href="/component/image">image</a></li>
                        <li><a href="/component/video">video</a></li>
                        <li><a href="/component/live-player">live-player</a></li>
                        <li><a href="/component/live-pusher">live-pusher</a></li>
                    </ul>
                </li>
                <li class="sidebar-nav-li" data-level="1.2.5"><span class="chapter">地图</span><ul>
                        <li><a href="/component/map">map</a></li>
                    </ul>
                </li>
                <li class="sidebar-nav-li" data-level="1.2.6"><span class="chapter">画布</span><ul>
                        <li><a href="/component/canvas">canvas</a></li>
                    </ul>
                </li>
                <li class="sidebar-nav-li" data-level="1.2.7"><span class="chapter">webview</span><ul>
                        <li><a href="/component/web-view">web-view</a></li>
                    </ul>
                </li>
                <li class="sidebar-nav-li" data-level="1.2.8"><span class="chapter">小程序开放能力组件</span><ul>
                        <li><a href="/component/ad">ad</a></li>
                        <li><a href="/component/official-account">official-account</a></li>
                        <li><a href="/component/open-data">open-data</a></li>
                    </ul>
                </li>
                <li class="sidebar-nav-li" data-level="1.2.9"><span class="chapter">App nvue专用组件</span><ul>
                        <li><a href="/component/barcode">barcode</a></li>
                        <li><a href="/component/list">list</a></li>
                        <li><a href="/component/cell">cell</a></li>
                        <li><a href="/component/recycle-list">recycle-list</a></li>
                        <li><a href="/component/waterfall">waterfall</a></li>
                        <li><a href="/component/refresh">refresh</a></li>
                    </ul>
                </li>
                <li class="sidebar-nav-li" data-level="1.2.10"><span class="chapter">扩展组件（uni ui）</span><ul>
                        <li class="active"><a href="/component/README?id=uniui">uni-ui整体介绍</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=21" target="_blank">Badge 数字角标</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=56" target="_blank">Calendar 日历</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=22" target="_blank">Card 卡片</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=23" target="_blank">Collapse 折叠面板</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=25" target="_blank">CountDown 倒计时</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=26" target="_blank">Drawer 抽屉</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=144" target="_blank">Fab 悬浮按钮</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=27" target="_blank">Grid 宫格</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=28" target="_blank">Icon 图标</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=375" target="_blank">IndexedList 索引列表</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=24" target="_blank">List 列表</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=29" target="_blank">LoadMore 加载更多</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=52" target="_blank">NavBar 自定义导航栏</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=30" target="_blank">NoticeBar 通告栏</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=31" target="_blank">NumberBox 数字输入框</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=32" target="_blank">Pagination 分页器</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=329" target="_blank">PopUp 弹出层</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=33" target="_blank">Rate 评分</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=54" target="_blank">SegmentedControl 分段器</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=34" target="_blank">Steps 步骤条</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=181" target="_blank">SwipeAction 滑动操作</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=284" target="_blank">SwiperDot 轮播图指示点</a></li>
                        <li><a href="https://ext.dcloud.net.cn/plugin?id=35" target="_blank">Tag 标签</a></li>
                        <li><a href="https://ext.dcloud.net.cn/?cat1=2" target="_blank">更多插件市场的组件</a></li>
                    </ul>
                </li>
                <li class="sidebar-nav-li" data-level="1.2.11"><a href="/component/mp-weixin-plugin">配置微信小程序插件</a></li>
                <li class="sidebar-nav-li" data-level="1.2.12"><a href="/component/native-component">原生组件说明</a></li>
                <div class="contact-box">
                    <a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
                        <img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/d@2x.png" width="20" height="20">
                        <div class="contact-smg">
                            <div>论坛</div>
                        </div>
                    </a>
                    <div class="contact-item">
                        <img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/git-1.png" width="20" height="20">
                        <div class="contact-smg">
                            <div>
                                代码仓库：<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a>、<a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
                            </div>
                        </div>
                    </div>
                    <div class="contact-item">
                        <img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/qq@2x.png" width="20" height="20">
                        <div class="contact-smg">
                            <div>官方QQ交流群</div>
                            <div>群9：775128777 &nbsp;<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=79702e87d483e72102ea307a20421d9bb6c862d46046cf0c754bd107117081f6">点此加入</a></div>
                            <div>群35：713420817（2000人已满）</div>
                            <div>群34：530305531（2000人已满）</div>
                            <div>群33：498071674（2000人已满）</div>
                            <div>群32：166188631（500人已满）</div>
                            <div>群31：567471669（500人已满）</div>
                            <div>群30：371046920（500人已满）</div>
                            <div>群29：202965481（500人已满）</div>
                            <div>群28：166188776（2000人已满）</div>
                            <div>群27：811363410（2000人已满）</div>
                            <div>群26：147867597（2000人已满）</div>
                            <div>群25：165297000（2000人未满）</div>
                            <div>群24：672494800（500人已满）</div>
                            <div>群23：599958679（500人已满）</div>
                            <div>群22：687186952（1000人已满）</div>
                            <div>群21：717019120（2000人已满）</div>
                            <div>群20：165796402（2000人未满）</div>
                            <div>群19：165657124（1000人已满）</div>
                            <div>群18：698592271（1000人已满）</div>
                            <div>群17：951348804（1000人已满）</div>
                            <div>群16：719211033（1000人已满）</div>
                            <div>群15：516984120（2000人已满）</div>
                            <div>群14：465953250（2000人未满）</div>
                            <div>群13：699478442（500人已满）</div>
                            <div>群12：884860657（1000人已满）</div>
                            <div>群11：296811328（1000人已满）</div>
                            <div>群10：959059626（2000人已满）</div>
                            <!--         <div>群9：775128777（1000人已满）</div> -->
                            <div>群8：695442854（2000人未满）</div>
                            <div>群7：942061423（1000人已满）</div>
                            <div>群6：697264024（2000人已满）</div>
                            <div>群5：731951419（1000人已满）</div>
                            <div>群4：942702595（1000人已满）</div>
                            <div>群3：773794803（1000人已满） </div>
                            <div>群2：901474938（1000人已满） </div>
                            <div>群1：531031261（1000人已满）</div>
                        </div>
                    </div>
                    <div class="contact-item">
                        <img src="//img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin@2x.png" width="20" height="20">
                        <div class="contact-smg">
                            <div>关注微信公众号</div>
                            <img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/weixin.jpg" width="90" height="90">
                        </div>
                    </div>
                </div></ul></div></aside><section class="content"><article class="markdown-section" id="main"><h3 id="基础组件"><a href="/component/README?id=%e5%9f%ba%e7%a1%80%e7%bb%84%e4%bb%b6" data-id="基础组件" class="anchor"><span>基础组件</span></a></h3><p>框架为开发者提供了一系列基础组件，类似HTML里的基础标签元素。</p><p>但uni-app的组件与HTML不同，而是与微信小程序相同，更适合手机端使用。</p><p>虽然不推荐使用HTML标签，但实际上如果开发者写了<code>div</code>等标签，在编译到非H5平台时也会被编译器转换为<code>view</code>标签，类似的还有<code>span</code>转<code>text</code>、<code>a</code>转<code>navigator</code>等，包括css里的元素选择器也会转。但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。</p><p>开发者可以通过组合这些基础组件进行快速开发。
                基于内置的基础组件，可以开发各种扩展组件，组件规范与vue组件相同。</p><p>DCloud提供了扩展组件框架uni-ui（见文末），同时更多三方开发的组件也收录到插件市场。</p><p>什么是组件：</p><ul>
                <li>组件是视图层的基本组成单元。</li>
                <li>一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。</li>
            </ul>
            <pre v-pre="" data-lang="html"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tagname</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>value<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
            content
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tagname</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></code></pre><p><strong>Tips</strong></p><ul>
                <li>所有组件与属性名都是小写，单词之间以连字符<code>-</code>连接。</li>
                <li>根节点为 <code>&lt;template&gt;</code>，这个 <code>&lt;template&gt;</code> 下只能有一个根<code>&lt;view&gt;</code>组件。</li>
                <li><strong>平台差异说明</strong>若无特殊说明，则表示所有平台均支持。</li>
            </ul>
            <h3 id="属性类型"><a href="/component/README?id=%e5%b1%9e%e6%80%a7%e7%b1%bb%e5%9e%8b" data-id="属性类型" class="anchor"><span>属性类型</span></a></h3><table>
                <thead>
                <tr>
                    <th style="text-align:left">类型</th>
                    <th style="text-align:left">描述</th>
                    <th style="text-align:left">注解</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="text-align:left">Boolean</td>
                    <td style="text-align:left">布尔值</td>
                    <td style="text-align:left">组件写上该属性，不管该属性等于什么，其值都为 <code>true</code>，只有组件上没有写该属性时，属性值才为 <code>false</code>。如果属性值为变量，变量的值会被转换为 <code>Boolean</code> 类型。</td>
                </tr>
                <tr>
                    <td style="text-align:left">Number</td>
                    <td style="text-align:left">数字</td>
                    <td style="text-align:left">1, 2.5</td>
                </tr>
                <tr>
                    <td style="text-align:left">String</td>
                    <td style="text-align:left">字符串</td>
                    <td style="text-align:left">"string"</td>
                </tr>
                <tr>
                    <td style="text-align:left">Array</td>
                    <td style="text-align:left">数组</td>
                    <td style="text-align:left">[ 1, "string" ]</td>
                </tr>
                <tr>
                    <td style="text-align:left">Object</td>
                    <td style="text-align:left">对象</td>
                    <td style="text-align:left">{ key: value }</td>
                </tr>
                <tr>
                    <td style="text-align:left">EventHandler</td>
                    <td style="text-align:left">事件处理函数名</td>
                    <td style="text-align:left"><code>handlerName</code> 是 methods 中定义的事件处理函数名</td>
                </tr>
                <tr>
                    <td style="text-align:left">Any</td>
                    <td style="text-align:left">任意属性</td>
                    <td style="text-align:left">&nbsp;</td>
                </tr>
                </tbody>
            </table>
            <h3 id="共同属性类型"><a href="/component/README?id=%e5%85%b1%e5%90%8c%e5%b1%9e%e6%80%a7%e7%b1%bb%e5%9e%8b" data-id="共同属性类型" class="anchor"><span>共同属性类型</span></a></h3><p>所有组件都有的属性：</p><table>
                <thead>
                <tr>
                    <th style="text-align:left">属性名</th>
                    <th style="text-align:left">类型</th>
                    <th style="text-align:left">描述</th>
                    <th style="text-align:left">注解</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="text-align:left">id</td>
                    <td style="text-align:left">String</td>
                    <td style="text-align:left">组件的唯一标示</td>
                    <td style="text-align:left">保持整个页面唯一</td>
                </tr>
                <tr>
                    <td style="text-align:left">class</td>
                    <td style="text-align:left">String</td>
                    <td style="text-align:left">组件的样式类</td>
                    <td style="text-align:left">在对应的 css 中定义的样式类</td>
                </tr>
                <tr>
                    <td style="text-align:left">style</td>
                    <td style="text-align:left">String</td>
                    <td style="text-align:left">组件的内联样式</td>
                    <td style="text-align:left">可以动态设置的内联样式</td>
                </tr>
                <tr>
                    <td style="text-align:left">hidden</td>
                    <td style="text-align:left">Boolean</td>
                    <td style="text-align:left">组件是否隐藏</td>
                    <td style="text-align:left">所有组件默认是显示的</td>
                </tr>
                <tr>
                    <td style="text-align:left">data-*</td>
                    <td style="text-align:left">Any</td>
                    <td style="text-align:left">自定义属性</td>
                    <td style="text-align:left">组件上触发的事件时，会发送给事件处理函数</td>
                </tr>
                <tr>
                    <td style="text-align:left">@*</td>
                    <td style="text-align:left">EventHandler</td>
                    <td style="text-align:left">组件的事件</td>
                    <td style="text-align:left">详见各组件详细文档，事件绑定参考 <a href="/use?id=%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e5%99%a8">事件处理器</a></td>
                </tr>
                </tbody>
            </table>
            <h3 id="特殊属性"><a href="/component/README?id=%e7%89%b9%e6%ae%8a%e5%b1%9e%e6%80%a7" data-id="特殊属性" class="anchor"><span>特殊属性</span></a></h3><p>几乎所有组件都有各自自定义的属性，可以对该组件的功能或样式进行修饰，请参考各个组件的定义。</p><h3 id="组件列表"><a href="/component/README?id=%e7%bb%84%e4%bb%b6%e5%88%97%e8%a1%a8" data-id="组件列表" class="anchor"><span>组件列表</span></a></h3><p>基础组件分为以下八大类：</p><p><strong>视图容器（View Container）：</strong></p><table>
                <thead>
                <tr>
                    <th style="text-align:left">组件名</th>
                    <th style="text-align:left">说明</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="text-align:left"><a href="/component/view">view</a></td>
                    <td style="text-align:left">视图容器</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/scroll-view">scroll-view</a></td>
                    <td style="text-align:left">可滚动视图容器</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/swiper">swiper</a></td>
                    <td style="text-align:left">滑块视图容器</td>
                </tr>
                </tbody>
            </table>
            <p><strong>基础内容（Basic Content）：</strong></p><table>
                <thead>
                <tr>
                    <th style="text-align:left">组件名</th>
                    <th style="text-align:left">说明</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="text-align:left"><a href="/component/icon">icon</a></td>
                    <td style="text-align:left">图标</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/text">text</a></td>
                    <td style="text-align:left">文字</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/rich-text">rich-text</a></td>
                    <td style="text-align:left">富文本</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/progress">progress</a></td>
                    <td style="text-align:left">进度条</td>
                </tr>
                </tbody>
            </table>
            <p><strong>表单组件（Form）：</strong></p><table>
                <thead>
                <tr>
                    <th style="text-align:left">标签名</th>
                    <th style="text-align:left">说明</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="text-align:left"><a href="/component/button">button</a></td>
                    <td style="text-align:left">按钮</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/form">form</a></td>
                    <td style="text-align:left">表单</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/input">input</a></td>
                    <td style="text-align:left">输入框</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/checkbox">checkbox</a></td>
                    <td style="text-align:left">多项选择器</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/radio">radio</a></td>
                    <td style="text-align:left">单项选择器</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/picker">picker</a></td>
                    <td style="text-align:left">列表选择器</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/picker-view">picker-view</a></td>
                    <td style="text-align:left">内嵌列表选择器</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/slider">slider</a></td>
                    <td style="text-align:left">滚动选择器</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/switch">switch</a></td>
                    <td style="text-align:left">开关选择器</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/label">label</a></td>
                    <td style="text-align:left">标签</td>
                </tr>
                </tbody>
            </table>
            <p><strong>导航（Navigation）：</strong></p><table>
                <thead>
                <tr>
                    <th style="text-align:left">组件名</th>
                    <th style="text-align:left">说明</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="text-align:left"><a href="/component/navigator">navigator</a></td>
                    <td style="text-align:left">应用链接</td>
                </tr>
                </tbody>
            </table>
            <p><strong>媒体组件（Media）：</strong></p><table>
                <thead>
                <tr>
                    <th style="text-align:left">组件名</th>
                    <th style="text-align:left">说明</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="text-align:left"><a href="/component/audio">audio</a></td>
                    <td style="text-align:left">音频</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/camera">camera</a></td>
                    <td style="text-align:left">相机</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/image">image</a></td>
                    <td style="text-align:left">图片</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/video">video</a></td>
                    <td style="text-align:left">视频</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="/component/live-player">live-player</a></td>
                    <td style="text-align:left">直播</td>
                </tr>
                </tbody>
            </table>
            <p><strong>地图（Map）：</strong></p><table>
                <thead>
                <tr>
                    <th style="text-align:left">组件名</th>
                    <th style="text-align:left">说明</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="text-align:left"><a href="/component/map">map</a></td>
                    <td style="text-align:left">地图</td>
                </tr>
                </tbody>
            </table>
            <p><strong>画布（Canvas）：</strong></p><table>
                <thead>
                <tr>
                    <th style="text-align:left">组件名</th>
                    <th style="text-align:left">说明</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="text-align:left"><a href="/component/canvas">canvas</a></td>
                    <td style="text-align:left">画布</td>
                </tr>
                </tbody>
            </table>
            <p><strong>webview（Web-view）：</strong></p><table>
                <thead>
                <tr>
                    <th style="text-align:left">组件名</th>
                    <th style="text-align:left">说明</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="text-align:left"><a href="/component/web-view">web-view</a></td>
                    <td style="text-align:left">web浏览器组件</td>
                </tr>
                </tbody>
            </table>
            <p><strong>平台开放数据（Open-data）：</strong></p><table>
                <thead>
                <tr>
                    <th style="text-align:left">组件名</th>
                    <th style="text-align:left">说明</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="text-align:left"><a href="/component/open-data">open-data</a></td>
                    <td style="text-align:left">展示平台开放的数据</td>
                </tr>
                </tbody>
            </table>
            <h3 id="uniui"><a href="/component/README?id=uniui" data-id="uniui" class="anchor"><span>扩展组件（uni-ui）：</span></a></h3><p>uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。</p><p>注意与web开发不同，uni-ui不包括基础组件，<strong>它是基础组件的补充</strong>。</p><p>web开发中有的开发者习惯用一个ui库完成所有开发，但在uni-app体系中，推荐开发者首先使用性能更高的基础组件，然后按需引入必要的扩展组件。</p><p>uni-ui支持npm安装和zip下载安装2种方式。</p><p>npm安装参考：<a href="https://ext.dcloud.net.cn/plugin?id=55" target="_blank">https://ext.dcloud.net.cn/plugin?id=55</a></p><p>下表为uni-ui的扩展组件清单，点击每个组件可单独安装。</p><table>
                <thead>
                <tr>
                    <th style="text-align:left">组件名</th>
                    <th style="text-align:left">说明</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=21" target="_blank">Badge</a></td>
                    <td style="text-align:left">数字角标</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=56" target="_blank">Calendar</a></td>
                    <td style="text-align:left">日历</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=22" target="_blank">Card</a></td>
                    <td style="text-align:left">卡片</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=23" target="_blank">Collapse</a></td>
                    <td style="text-align:left">折叠面板</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=25" target="_blank">CountDown</a></td>
                    <td style="text-align:left">倒计时</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=26" target="_blank">Drawer</a></td>
                    <td style="text-align:left">抽屉</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=144" target="_blank">Fab</a></td>
                    <td style="text-align:left">悬浮按钮</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=27" target="_blank">Grid</a></td>
                    <td style="text-align:left">宫格</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=28" target="_blank">Icon</a></td>
                    <td style="text-align:left">图标</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=375" target="_blank">IndexedList</a></td>
                    <td style="text-align:left">索引列表</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=24" target="_blank">List</a></td>
                    <td style="text-align:left">列表</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=29" target="_blank">LoadMore</a></td>
                    <td style="text-align:left">加载更多</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=52" target="_blank">NavBar</a></td>
                    <td style="text-align:left">自定义导航栏</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=30" target="_blank">NoticeBar</a></td>
                    <td style="text-align:left">通告栏</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=31" target="_blank">NumberBox</a></td>
                    <td style="text-align:left">数字输入框</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=32" target="_blank">Pagination</a></td>
                    <td style="text-align:left">分页器</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=329" target="_blank">PopUp</a></td>
                    <td style="text-align:left">弹出层</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=33" target="_blank">Rate</a></td>
                    <td style="text-align:left">评分</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=54" target="_blank">SegmentedControl</a></td>
                    <td style="text-align:left">分段器</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=34" target="_blank">Steps</a></td>
                    <td style="text-align:left">步骤条</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=181" target="_blank">SwipeAction</a></td>
                    <td style="text-align:left">滑动操作</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=284" target="_blank">SwiperDot</a></td>
                    <td style="text-align:left">轮播图指示点</td>
                </tr>
                <tr>
                    <td style="text-align:left"><a href="https://ext.dcloud.net.cn/plugin?id=35" target="_blank">Tag</a></td>
                    <td style="text-align:left">标签</td>
                </tr>
                </tbody>
            </table>
            <p><strong>更多组件</strong></p><p>除了基础组件、uni-ui，插件市场还有更多扩展组件、模板，包括前端组件和原生扩展组件，具体见<a href="https://ext.dcloud.net.cn/" target="_blank">插件市场</a>。</p><p>关于其他vue的web组件库、小程序组件库是否能在uni-app中使用的问题，参考<a href="http://ask.dcloud.net.cn/article/35489" target="_blank">http://ask.dcloud.net.cn/article/35489</a></p><hr align="center" color="#987cb9" size="1">发现错误？想参与编辑？<a href="//github.com/dcloudio/uni-app/blob/master/docs/component/README.md" target="_blank">在 GitHub 上编辑此页面！</a></article><article class="markdown-section search" id="search-results"><!--searchResults--></article></section></main>
<script src="https://hm.baidu.com/hm.js?fe3b7a223fc08c795f0f4b6350703e6f"></script><script>
    console.log("%c诚邀优秀前端加盟，一起打造uni-app框架：https://ask.dcloud.net.cn/article/35098", "color:red")
    // docsify config start
    window.$docsify = {
        alias: {
            '/.*/_navbar.md': '/_navbar.md',
            '/(.*)/.*/_sidebar.md': '/$1/_sidebar.md',
        },
        name: 'uni-app',
        // TODO 如需提交,必须改为 history 模式
        routerMode: 'history',
        // routerMode: 'hash',
        repo: false,
        coverpage: false,
        loadSidebar: true,
        loadNavbar: true,
        auto2top: true,
        mdCache: 7200000,
        search: {
            maxAge: 7200000,
            paths: ['/api/arrayBufferToBase64','/api/base64ToArrayBuffer','/api/canvas/CanvasContext','/api/canvas/canvasGetImageData','/api/canvas/CanvasGradient','/api/canvas/canvasPutImageData','/api/canvas/canvasToTempFilePath','/api/canvas/createCanvasContext','/api/canvas/createOffscreenCanvas','/api/extend/native-plugin','/api/file/file','/api/file/getFileSystemManager','/api/key','/api/lifecycle','/api/location/location','/api/location/map','/api/location/open-location','/api/log','/api/media/audio-context','/api/media/background-audio-manager','/api/media/camera-context','/api/media/editor-context','/api/media/image','/api/media/live-player-context','/api/media/record-manager','/api/media/video-context','/api/media/video','/api/other/advertisement','/api/other/authentication','/api/other/authorize','/api/other/card','/api/other/choose-address','/api/other/get-extconfig','/api/other/getAccountInfoSync','/api/other/invoice-title','/api/other/open-miniprogram','/api/other/report','/api/other/reportAnalytics','/api/other/reportMonitor','/api/other/set-enable-debug','/api/other/setting','/api/other/sport','/api/other/template','/api/other/update','/api/plugins/login','/api/plugins/payment','/api/plugins/provider','/api/plugins/push','/api/plugins/share','/api/plugins/voice','/api/README','/api/request/mDNS','/api/request/network-file','/api/request/request','/api/request/socket-task','/api/request/UDP','/api/request/websocket','/api/router','/api/storage/storage','/api/system/accelerometer','/api/system/barcode','/api/system/batteryInfo','/api/system/ble','/api/system/bluetooth','/api/system/brightness','/api/system/capture-screen','/api/system/clipboard','/api/system/compass','/api/system/contact','/api/system/deviceMotion','/api/system/gyroscope','/api/system/ibeacon','/api/system/info','/api/system/memory','/api/system/network','/api/system/nfc','/api/system/phone','/api/system/vibrate','/api/system/wifi','/api/timer','/api/ui/animation','/api/ui/bgcolor','/api/ui/font','/api/ui/intersection-observer','/api/ui/menuButton','/api/ui/navigationbar','/api/ui/nextTick','/api/ui/nodes-info','/api/ui/prompt','/api/ui/pulldown','/api/ui/scroll','/api/ui/tabbar','/api/ui/window','/api/window/communication','/api/window/subNVues','/api/window/window','/api/worder','/case','/casecode','/cloud','/collocation/frame/communication','/collocation/frame/lifecycle','/collocation/frame/log','/collocation/frame/subNVues','/collocation/frame/timer','/collocation/frame/window','/collocation/manifest','/collocation/package','/collocation/pages','/collocation/uni-scss','/collocation/vue-config','/component/ad','/component/audio','/component/barcode','/component/button','/component/camera','/component/canvas','/component/cell','/component/checkbox','/component/cover-view','/component/editor','/component/form','/component/icon','/component/image','/component/input','/component/label','/component/list','/component/live-player','/component/live-pusher','/component/map','/component/movable-view','/component/mp-weixin-plugin','/component/native-component','/component/navigator','/component/official-account','/component/open-data','/component/open','/component/picker-view','/component/picker','/component/progress','/component/radio','/component/README','/component/recycle-list','/component/refresh','/component/rich-text','/component/scroll-view','/component/slider','/component/swiper','/component/switch','/component/text','/component/textarea','/component/video','/component/view','/component/waterfall','/component/web-view','/ecosystem','/extendUI','/faq','/frame','/matter','/performance','/platform','/quickstart','/','/release','/resource','/select','/snippet','/template','/translate','/use-html5plus','/use-weex','/use'],
            placeholder: '搜索',
            noData: '没有结果',
            depth: 4
        },
        maxLevel: 4,
        subMaxLevel: 3,
        banner: ['/case'],
        plugins: [
            function(hook, vm) {
                hook.afterEach(function(html) {
                    var url = '//github.com/dcloudio/uni-app/blob/master/docs' + vm.route.file
                    return html + '<hr align=center color=#987cb9 size=1>发现错误？想参与编辑？<a href=' + url + ' target=_blank>在 GitHub 上编辑此页面！</a>'
                })
            }
        ]
    }
    // docsify config end
</script>
<script src="/static/docsify.min.js?v=1556263038788"></script>
<script src="/static/search.min.js?v=1559299190620"></script>
<script src="/static/preview.min.js?v=1556263038786"></script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?fe3b7a223fc08c795f0f4b6350703e6f";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
        //加入广告
        function creatPop() {
            var popTime = localStorage.getItem("popTime"),
                hasClose = localStorage.getItem("hasClose");
            var nowTime = new Date().getTime();
            if (popTime && Number(popTime) + 24 * 60 * 60 * 1000 > nowTime && hasClose === "true") {
                return;
            } else {
                localStorage.removeItem("hasClose");
                localStorage.setItem("popTime", nowTime);
            }
            var pop = document.createElement("div");
            pop.setAttribute("style",
                "width: 180px;height: 120px;position: fixed;bottom: 30px;right: 30px;z-index: 99;");
            pop.innerHTML =
                '<div id="close-pop" style="line-height: 13px;color: #000000;font-size: 28px;position: absolute;right: 0px;top: 6px;cursor:pointer;">×</div><a href="//ask.dcloud.net.cn/question/60729" target="_blank"><img width="100%" src="https://img-cdn-qiniu.dcloud.net.cn/static/images/uniapp_share_promotion.png"></a>';
            document.body.appendChild(pop);
            var closePop = document.querySelector("#close-pop");
            closePop.addEventListener("click", function() {
                localStorage.setItem("hasClose", "true");
                document.body.removeChild(pop);
            });
        }
        // creatPop();

        window.addEventListener("click", function(e) {
            var target = e.target;
            if (target.id === "zhizhang") { //点击开发者的感谢信--弹窗多的话，可以封成一个组件
                var preview = new $docsify.Preview('https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/gnaxie.png');
                preview.show();
                return
            }
            if (target.className === "chapter") { //左侧导航的折叠
                var chapterParent = target.parentElement;
                var summary = localStorage.getItem("summary") ? JSON.parse(localStorage.getItem(
                    "summary")) : {};
                var level = chapterParent.dataset.level;
                if (chapterParent.classList.contains("close")) {
                    summary[level] = false;
                    chapterParent.classList.remove("close");
                } else {
                    summary[level] = true;
                    chapterParent.classList.add("close");
                }
                localStorage.setItem("summary", JSON.stringify(summary))
                return;
            }

            if (target.tagName === "IMG" && target.className !== "preview-img") {
                var src = target.src,
                    showImg = true;
                while (target && target !== document) {
                    if (target.tagName == 'A') {
                        showImg = false;
                        break;
                    }
                    target = target.parentNode
                }
                if (showImg && src) {
                    var preview = new $docsify.Preview(src);
                    preview.show();
                    return
                }
            }
        }, true)

    })();

    function videoPlay() {
        var img = new Image();
        img.src = "http://uniapp.dcloud.io/video/log/play.png";
    }
</script>




<div class="progress" style="opacity: 0; width: 0%;"></div><div id="HUABAN_WIDGETS"><div class="HUABAN-f-button" style="display: none;">采集</div><style>#HUABAN_WIDGETS  {font-family: "helvetica neue",arial,sans-serif; color: #444; font-size: 14px;} #HUABAN_WIDGETS * {box-sizing: content-box;} #HUABAN_WIDGETS .HUABAN-main {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #e5e5e5; background: rgba(229,229,229,.95); max-height: 100%; overflow: hidden; z-index: 9999999999999;} #HUABAN_WIDGETS a img {border: 0;} #HUABAN_WIDGETS .HUABAN-header {height: 50px; background: white; box-shadow: 0 0 4px rgba(0,0,0,.2); width: 100%; left: 0; top: 0; position: absolute;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-inner {margin: 0 auto; position: relative;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-close {width: 60px; height: 50px; border-left: 1px solid #ddd; position: absolute; right: 0; top: 0; background: url(https://huaban.com/img/widgets/btn_close.png) 20px 14px no-repeat; cursor: pointer;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-close:hover {background-position: 20px -26px;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-close:active {background-position: 20px -66px;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-logo {display: block; position: absolute; top: 12px;} #HUABAN_WIDGETS .HUABAN-waterfall-holder {position: relative; overflow-y: auto; height: 100%;} #HUABAN_WIDGETS .HUABAN-waterfall {position: relative; margin-top: 50px;} #HUABAN_WIDGETS .HUABAN-waterfall .HUABAN-empty {position: absolute; left: 50%; top: 30px; height: 36px; line-height: 36px; width: 216px; text-align: left; margin-left: -128px; color: #777; background: url(https://huaban.com/img/widgets/icon_notice.png) 12px 8px no-repeat white; padding-left: 40px; font-size: 15px;} #HUABAN_WIDGETS .HUABAN-btn {display: inline-block; border-radius: 2px; font-size: 14px; padding: 0 12px; height: 30px; line-height: 30px; cursor: pointer; text-decoration: none; white-space: nowrap; -moz-user-select: none; -webkit-user-select: none; user-select: none; text-align: center; background: #D53939; color: white;} #HUABAN_WIDGETS .HUABAN-btn:hover {background: #E54646;} #HUABAN_WIDGETS .HUABAN-btn:active {background: #C52424;} #HUABAN_WIDGETS .HUABAN-wbtn {background: #EDEDED; color: #444;} #HUABAN_WIDGETS .HUABAN-wbtn:hover {background: #F2F2F2;} #HUABAN_WIDGETS .HUABAN-wbtn:active {background: #DDD;} #HUABAN_WIDGETS .HUABAN-f-button {position: absolute; display: none; z-index: 9999999999998; box-shadow: 0 0 0 2px rgba(255,255,255,.2); background: #aaa; background: rgba(0,0,0,.3); color: white; cursor: pointer; padding: 0 12px; height: 30px; line-height: 30px; border-radius: 2px; font-size: 14px} #HUABAN_WIDGETS .HUABAN-f-button:hover {background-color: #999; background-color: rgba(0,0,0,.5);} #HUABAN_WIDGETS .HUABAN-f-button:active {background-color: rgba(0,0,0,.6);} #HUABAN_WIDGETS .HUABAN-red-normal-icon-button {width: 36px; height: 24px; border: 0px; line-height: 24px; padding-left: 24px; padding-right: 0px; text-align: left; background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -200px no-repeat; box-shadow: none !important; font-size: 14px; background-color: transparent !important;} #HUABAN_WIDGETS .HUABAN-red-normal-icon-button:hover {background-position: -130px -200px;} #HUABAN_WIDGETS .HUABAN-red-normal-icon-button:active {background-position: -260px -200px;} #HUABAN_WIDGETS .HUABAN-red-large-icon-button {width: 80px; height: 24px; border: 0px; line-height: 24px; padding-left: 24px; padding-right: 0px; text-align: left; background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -150px no-repeat; box-shadow: none !important; font-size: 14px; background-color: transparent !important;} #HUABAN_WIDGETS .HUABAN-red-large-icon-button:hover {background-position: -130px -150px;} #HUABAN_WIDGETS .HUABAN-red-large-icon-button:active {background-position: -260px -150px;} #HUABAN_WIDGETS .HUABAN-red-small-icon-button {width: 30px; height: 21px; border: 0px; line-height: 21px; padding-left: 20px; padding-right: 0px; text-align: left; background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -250px no-repeat; box-shadow: none !important; font-size: 12px; background-color: transparent !important;} #HUABAN_WIDGETS .HUABAN-red-small-icon-button:hover {background-position: -130px -250px;} #HUABAN_WIDGETS .HUABAN-red-small-icon-button:active {background-position: -260px -250px;} #HUABAN_WIDGETS .HUABAN-white-normal-icon-button {width: 36px; height: 24px; border: 0px; line-height: 24px; padding-left: 24px; padding-right: 0px; text-align: left; background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -500px no-repeat; box-shadow: none !important; color: #444; font-size: 14px; background-color: transparent !important;} #HUABAN_WIDGETS .HUABAN-white-normal-icon-button:hover {background-position: -130px -500px;} #HUABAN_WIDGETS .HUABAN-white-normal-icon-button:active {background-position: -260px -500px;} #HUABAN_WIDGETS .HUABAN-white-large-icon-button {width: 80px; height: 24px; border: 0px; line-height: 24px; padding-left: 24px; padding-right: 0px; text-align: left; background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -450px no-repeat; box-shadow: none !important; color: #444; font-size: 14px; background-color: transparent !important;} #HUABAN_WIDGETS .HUABAN-white-large-icon-button:hover {background-position: -130px -450px;} #HUABAN_WIDGETS .HUABAN-white-large-icon-button:active {background-position: -260px -450px;} #HUABAN_WIDGETS .HUABAN-white-small-icon-button {width: 30px; height: 21px; border: 0px; line-height: 21px; padding-left: 20px; padding-right: 0px; text-align: left; background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -550px no-repeat; box-shadow: none !important; color: #444; font-size: 12px; background-color: transparent !important;} #HUABAN_WIDGETS .HUABAN-white-small-icon-button:hover {background-position: -130px -550px;} #HUABAN_WIDGETS .HUABAN-white-small-icon-button:active {background-position: -260px -550px;} #HUABAN_WIDGETS .HUABAN-cell {width: 236px; position: absolute; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .3s ease-in-out, top .3s linear;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-img-holder {overflow: hidden; position: relative;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-img-holder:hover img.HUABAN-cell-img {opacity: .8} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-video-icon {width: 72px; height: 62px; position: absolute; left: 50%; top: 50%; margin: -31px auto auto -36px; background: url(https://huaban.com/img/widgets/media_video.png) 0 0 no-repeat; display: none;} #HUABAN_WIDGETS .HUABAN-cell.HUABAN-video .HUABAN-video-icon {display: block;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-over {display: none;} #HUABAN_WIDGETS .HUABAN-cell:hover .HUABAN-over {display: block;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-over .HUABAN-btn {width: 60px; height: 34px; padding: 0; position: absolute; left: 50%; top: 50%; margin: -18px 0 0 -31px; line-height: 34px; box-shadow: 0 0 0 2px rgba(255,255,255,.2); font-size: 16px;} #HUABAN_WIDGETS .HUABAN-cell.HUABAN-long .HUABAN-img-holder {height: 600px;} #HUABAN_WIDGETS .HUABAN-cell.HUABAN-long .HUABAN-img-holder:after {content: ""; display: block; position: absolute; width: 236px; height: 12px; left: 0; bottom: 0; background: url(https://huaban.com/img/widgets/long_image_shadow_2.png) repeat-x 4px top;} #HUABAN_WIDGETS .HUABAN-cell img {width: 236px; display: block;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-size {margin: 8px 16px; font-size: 12px; color: #999} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-description {display: block; width: 202px; margin: 0 6px 6px; padding: 6px 10px; border: 0; resize: none; outline: 0; border: 1px solid transparent; line-height: 18px; font-size: 13px; overflow: hidden; word-wrap: break-word; background: url(https://huaban.com/img/widgets/icon_edit.png) 500px center no-repeat;} #HUABAN_WIDGETS .HUABAN-cell:hover .HUABAN-description {background-color: #fff9e0; background-position: right top;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-description:focus {background-color: #F9F9F9; background-position: 500px center;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-select-btn {width: 34px; height:34px; background: url(https://huaban.com/img/widgets/checkbox.png) 0 0 no-repeat; position: absolute; right: 5px; top: 5px; cursor: pointer;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-pinned-label {position: absolute; left: 0; top: 10px; height: 24px; line-height: 24px; padding: 0 10px; background: #CE0000; background: rgba(200, 0, 0, 0.9); color: white; font-size: 12px; display: none;} #HUABAN_WIDGETS .HUABAN-cell.HUABAN-pinned .HUABAN-pinned-label {display: block;} #HUABAN_WIDGETS .HUABAN-selected .HUABAN-select-btn {background-position: 0 -40px;} #HUABAN_WIDGETS .HUABAN-multi .HUABAN-cell .HUABAN-img-holder {cursor: pointer;} #HUABAN_WIDGETS .HUABAN-multi .HUABAN-cell .HUABAN-cell-pin-btn {display: none;} #HUABAN_WIDGETS .HUABAN-multi .HUABAN-cell .HUABAN-over {display: block;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-multi-buttons {position: absolute; top: 10px; left: 0; display: none;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-multi-buttons .HUABAN-btn {margin-right: 10px;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-multi-noti {display: none; height: 50px; line-height: 50px; text-align: center; font-size: 16px; color: #999; font-weight: bold;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-multi-noti span {font-weight: normal;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-multi-noti i {font-style: normal;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-notice {padding: 0 10px; height:30px; line-height: 30px; position: absolute; left: 50%; top: 10px; margin-left: -83px; background: #fff9e2; text-align: center;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-notice i {display: inline-block; width: 18px; height: 18px; background: url(https://huaban.com/img/widgets/icon_notice.png) 0 0 no-repeat; vertical-align: top; margin: 6px 6px 0 0;} #HUABAN_WIDGETS .HUABAN-switcher {height: 50px; width: 100px; position: relative;} #HUABAN_WIDGETS .HUABAN-switcher .HUABAN-title {position: absolute; right: 75px; top: 13px; color: #999; white-space: nowrap; line-height: 24px; opacity: 0; visibility: hidden;} #HUABAN_WIDGETS .HUABAN-switcher:hover .HUABAN-title {visibility: visible; opacity: 1; -webkit-transition: opacity .2s linear; -webkit-transition-delay: .2s; transition: opacity .2s linear; transition-delay: .2s;} #HUABAN_WIDGETS .HUABAN-switcher .HUABAN-bar {width: 40px; height: 24px; background: #EB595F; border-radius: 12px; color: white; position: absolute; right: 0; top: 13px; cursor: pointer; font-size: 14px; -webkit-transition: all .2s linear; transition: all .2s linear;} #HUABAN_WIDGETS .HUABAN-switcher:hover .HUABAN-bar {width: 64px;} #HUABAN_WIDGETS .HUABAN-switcher.HUABAN-on .HUABAN-bar {background: #7DD100;} #HUABAN_WIDGETS .HUABAN-switcher .HUABAN-bar .HUABAN-round {width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; left: 2px; top: 2px; -webkit-transition: left .2s linear; box-shadow: 0px 0px 3px rgba(0,0,0,0.15); transition: left .2s linear; box-shadow: 0px 0px 3px rgba(0,0,0,0.15);} #HUABAN_WIDGETS .HUABAN-switcher.HUABAN-on .HUABAN-bar .HUABAN-round {left: 17px;} #HUABAN_WIDGETS .HUABAN-switcher.HUABAN-on:hover .HUABAN-bar .HUABAN-round {left: 41px;} #HUABAN_WIDGETS .HUABAN-switcher .HUABAN-bar .HUABAN-text-1 {height: 24px; line-height: 24px; position: absolute; right:17px; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all .2s linear; transition: all .2s linear;} #HUABAN_WIDGETS .HUABAN-switcher:hover .HUABAN-bar .HUABAN-text-1 {right: 9px; opacity: 1; visibility: visible;} #HUABAN_WIDGETS .HUABAN-switcher.HUABAN-on:hover .HUABAN-bar .HUABAN-text-1 {right: 17px; opacity: 0; visibility: hidden;} #HUABAN_WIDGETS .HUABAN-switcher .HUABAN-bar .HUABAN-text-2 {height: 24px; line-height: 24px; position: absolute; left:17px; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all .2s linear; transition: all .2s linear;} #HUABAN_WIDGETS .HUABAN-switcher:hover .HUABAN-bar .HUABAN-text-2 {left: 17px; opacity: 0; visibility: hidden;} #HUABAN_WIDGETS .HUABAN-switcher.HUABAN-on:hover .HUABAN-bar .HUABAN-text-2 {left: 9px; opacity: 1; visibility: visible;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-switcher {position: absolute; right: 0; top: 0;} <!--[if IE 6]>#HUABAN_WIDGETS .HUABAN-red-normal-icon-button, .HUABAN-red-large-icon-button, .HUABAN-red-small-icon-button, .HUABAN-white-normal-icon-button, .HUABAN-white-large-icon-button, .HUABAN-white-small-icon-button { background-image: url({{imgBase}}/widget_icons_ie6.png) <![endif]--></style></div></body></html>
